<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>车行管理/区域管理/车位详情</span>
      </div>
      <div class="d1">车位详情</div>
    </el-card>
    <el-card class="box-card" v-for="item in pageinfo" :key="item.id">
      <div slot="header" class="clearfix">
        <el-button
          style="float: right; margin-right: 92%; padding: 3px 0"
          type="text"
          @click="dialogFormVisible = true"
          >编辑</el-button
        >
        <span>车位信息</span>
      </div>
      <div>
        <el-descriptions class="margin-top" :column="3" :size="size">
          <el-descriptions-item label="区域">{{
            item.communityName
          }}</el-descriptions-item>
          <el-descriptions-item label="车位编号">{{
            item.serialNumber
          }}</el-descriptions-item>
          <el-descriptions-item label="车位面积">{{
            item.carpArea
          }}</el-descriptions-item>
          <el-descriptions-item label="楼层">
            <el-tag size="small">{{ item.building }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="车位类型">{{
            item.vehicelType
          }}</el-descriptions-item>
          <el-descriptions-item label="车位状态">{{
            item.vehicleState
          }}</el-descriptions-item>
          <el-descriptions-item label="持有人"
            >{{ item.userName }}
            <div class="c1">
              <el-button style="margin-right: 80%; padding: 3px 0" type="text"
                >住户详情</el-button
              >
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="添加时间">{{
            item.createTime
          }}</el-descriptions-item>
          <el-descriptions-item label="添加人">{{
            item.identity
          }}</el-descriptions-item>
          <el-descriptions-item label="备注">无</el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button
          style="float: right; margin-right: 92%; padding: 3px 0"
          type="text"
          @click="dialogFormVisible1 = true"
          >编辑</el-button
        >
        <span>车辆信息</span>
      </div>
      <div>
        <el-descriptions class="margin-top" :column="3" :size="size">
          <el-descriptions-item label="车牌号"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="车辆品牌"
            >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
          >
          <el-descriptions-item label="车辆型号"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="车身颜色"
            >kooriookami</el-descriptions-item
          >
          <el-descriptions-item label="备注">kooriookami</el-descriptions-item>
          <el-descriptions-item label="车辆图片"
            >kooriookami</el-descriptions-item
          >
        </el-descriptions>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>审核</span>
      </div>
      <div>审核意见</div>
      <div style="margin: 20px 0"></div>
      <el-input
        class="e1"
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 4 }"
        placeholder="请输入内容"
        v-model="textarea2"
      >
      </el-input>
      <br />
      <div style="margin: 20px 0"></div>
      <el-button type="primary">审核通过</el-button>
      <el-button type="danger">审核不通过</el-button>
      <el-button @click="$router.go(-1)">返回</el-button>
    </el-card>
    <div>
      <el-dialog title="区域管理/基础信息" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="区域名称" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="区域编号" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="区域面积" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车位数量" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary">提 交</el-button>
          <el-button @click="dialogFormVisible = false">返 回</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="区域管理/基础信息" :visible.sync="dialogFormVisible1">
        <el-form>
          <el-form-item label="区域名称" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="区域编号" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="区域面积" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="车位数量" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary">提 交</el-button>
          <el-button @click="dialogFormVisible1 = false">返 回</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import path from "path";

export default {
  name: "Approval",
  data() {
    return {
      vehicleNumberId: this.$route.query.vehicleNumberId,
      pageinfo: {},
      dialogFormVisible: false,
      dialogFormVisible1: false,
      formLabelWidth: "120px",
      textarea2: "",
    };
  },
  methods: {
    getAllinfo() {
      this.$axios
        .get("/servercwl/car/PcInfo?vehicleNumberId=" + this.vehicleNumberId)
        .then((res) => {
          if (res.data.code == 20000) {
            this.pageinfo = res.data.data.data;
          }
        });
    },
  },
  mounted() {
    this.getAllinfo();
  },
};
</script>

<style scoped>
.d1 {
  font-size: 25px;
}
.box-card {
  margin-top: 15px;
}
.c1 {
  margin-left: 20px;
}
.e1 {
  width: 30%;
}
</style>